<template>
  <div class="questions-container">
    <div class="app-container">
      <el-card class="box-card">
        <HeadSelect @Search="Search" />
        <el-tabs
          type="card"
          style="margin-top: 0px"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="全部"
            name="first"
            aria-selected="true"
            @click="chkState = null"
          >
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second" @click="chkState = 0">
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third" @click="chkState = 1">
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth" @click="chkState = 2">
          </el-tab-pane>
        </el-tabs>
        <select-item
          @changePage="changePage"
          @changeSize="changeSize"
          @refrash="getSelectedList"
          :list="list"
        ></select-item>
      </el-card>
    </div>
  </div>
</template>

<script>
import HeadSelect from '../components/toubu.vue'
import { choice } from '@/api/hmmm/questions.js'
import SelectItem from '../components/selectedItem.vue'
export default {
  name: '',
  components: {
    HeadSelect,
    SelectItem
  },
  props: {},
  data () {
    return {
      list: [], // 当前页面数据
      dialogVisible: false, // 控制弹出层
      page: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      // 请求数据
      activeName: 'first',
      chkState: null,
      result: {}
    }
  },
  computed: {
    // que () {
    //   return {
    //     page: this.page.page,
    //     pagesize: this.page.pagesize,
    //     chkState: this.chkState
    //   }
    // }
  },
  watch: {
    // que: {
    //   handler (val, oldVal) {
    //     this.getSelectedList(val)
    //   },
    //   deep: true
    // }

  },
  created () {
    this.getSelectedList()
  },
  mounted () { },
  methods: {
    async getSelectedList () {
      const { data } = await choice(this.page) // 获取当前页码的数据
      this.list = data
      // console.log(this.list)
      this.page.total = this.list.counts
    },
    changePage (e) {
      this.page.page = e
      this.getSelectedList()
    },
    changeSize (e) {
      this.page.pagesize = e
      this.getSelectedList()
    },

    // 切换tab栏
    handleClick (tab, event) {
      if (tab.name === 'first') {
        this.page = {
          page: 1,
          keyword: this.result.keyword
        }
      } else if (tab.name === 'second') {
        this.page.chkState = 0
      } else if (tab.name === 'third') {
        this.page.chkState = 1
      } else {
        this.page.chkState = 2
      }
      this.getSelectedList()
    },
    Search (e) {
      this.result = e
      console.log(e)
      this.page = {
        page: 1,
        pagesize: 5
      }
      if (e.subjectID !== '') {
        console.log(22)
        this.page.subjectID = e.subjectID
      }
      this.page.keyword = e.keyword
      this.getSelectedList()
    }
  }
}
</script>
<style scoped>
.el-card {
  border: 0;
}
.el-button--danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.el-button--danger:focus,
.el-button--danger:hover {
  background: #f78989;
  border-color: #f78989;
  color: #fff;
}
.head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.head .headChild {
  padding-bottom: 8px;
  flex: 25%;
}
.paddingb {
  padding-bottom: 8px;
}
</style>
